<%@page import="itsm.isperp.framework.core.context.ContextHolder"%><%@ page
	language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
  String path = request.getContextPath();
			String basePath = ContextHolder.getWebServerName(request);
%>

<script src="<%=path%>/js/libs/exif/exif.js"></script>

<style>
</style>

<div data-role="header" data-position="inline"
	class="ui-header ui-bar-a" role="banner">

	<!-- 	<div style="text-align: left; font-size: 12px; vertical-align: middle; line-height: 15px;
                        margin-left: 5px;font-weight:normal;">
                        &nbsp;&nbsp;&nbsp;&nbsp;感谢您的申报，如有必要，您还可以在提交以下表格后，用微信回复功能用文字或者语音做更详细的补充说明，或发送设备图片，您的位置等信息给我们，谢谢！
                    </div> -->
</div>
<div style="color:red;font-size:11px;text-align: center;margin-top:3px;">提示：如涉及机密信息，请使用网页或者电话报单方式。</div>
<div data-role="content" class="ui-content" role="main"
	style="padding-top:0px;background-color:#f8f8f8">

	<form action="<%=basePath%>api/wechat/incident/save" data-ajax="false"
		id="formid">
		<div style="display: none">
			<input type="hidden" name="openid" value="${openid }" id="openid">
			<input type="hidden" name="id" value="${id }" id="id">
		</div>


		<div class="weui-cell " style="">
			<div class="weui-cell__hd">
				<label class="weui-label"> <span
					style="color:red;font-size:11px;">*</span>手机号码 </label>
			</div>
			<div class="weui-cell__bd weui-cell_primary">
				<input id="mobile" name="mobile" value="${appUser.mobile }"
					data-valid="手机号码" class="weui-input formRequired" type="text"
					placeholder="请填写方便与你取得联系的手机号码">
			</div>
			<div class="weui-cell_ft" style="display: none">
				<i class="weui_icon_warn"></i>
			</div>
		</div>
		
		 <div class="weui-cell ">
				<div class="weui-cell__hd">
					<label class="weui-label">
					 办公电话 </label>
				</div>
				<div class="weui-cell__bd weui-cell_primary">
					<input id="tel" name="tel" value="${appUser.tel }" 
						data-valid="办公电话" class="weui-input" type="text"
						placeholder="请填写办公电话">
				</div>
				<div class="weui-cell_ft" style="display: none">
					<i class="weui_icon_warn"></i>
				</div>
		</div>
		
		 <div class="weui-cell ">
				<div class="weui-cell__hd">
					<label class="weui-label">
					 <span
					style="color:red;font-size:11px;">*</span>位置 </label>
				</div>
				<div class="weui-cell__bd weui-cell_primary">
					<input id="address" name="address" value="${appUser.address }" 
						data-valid="位置" class="weui-input formRequired" type="text"
						placeholder="请填写位置">
				</div>
				<div class="weui-cell_ft" style="display: none">
					<i class="weui_icon_warn"></i>
				</div>
		</div> 

<!-- 		 <div class="weui-cells" style="margin-top:0px;">
			<div class="weui-cell weui-cell_select weui-cell_select-after">
				<div class="weui-cell__hd">
					<label for="" class="weui-label">类型</label>
				</div>
				<div class="weui-cell__bd">
					<select id="idYear"  name="incidentType" data=""
						data-allow-empty="false"  class="weui-select">
					  <option>软件</option>
					  <option>桌面</option>
					  <option>机房网络</option>
					  <option>法庭会议</option>
					</select>						
				</div>
			</div>
			
		</div>  -->

		


		<div class="weui-cell ">
			<div class="weui-cell__hd">
				<label class="weui-label"> <span
					style="color:red;font-size:11px;">*</span>标题</label>
			</div>
			<div class="weui-cell__bd weui-cell_primary">
				<input id="title" name="title" class="weui-input formRequired"
					data-valid="标题" type="text" placeholder="请输入事件标题">
			</div>
			<div class="weui-cell_ft" style="display: none">
				<i class="weui_icon_warn"></i>
			</div>
		</div>


		<div class="weui-cells__title" style="font-size:16px;"></div> 
		<div class="weui-cells weui-cells_form" style="margin-top:0px;">
			<div class="weui-cell">
				<div class="weui-cell__bd">
					<textarea class="weui-textarea" placeholder="请输入事件详细描述" rows="3"
						name="description" id="description"></textarea>
					<!-- <div class="weui-textarea-counter">
						<span>0</span>/200
					</div> -->
				</div>
			</div>
		</div>
		<div class="weui-cells__title" style="font-size:16px;"></div> 
		<div class="weui-cells weui-cells_form" >
		   <div class="weui-cell">
			<div class="weui-cell__bd ">
				<div class="weui-uploader">
					<div class="weui-uploader__hd weui-cell" style="padding:0px;">
						<div class="weui-cell__bd weui-cell_primary">图片上传</div>
						<div class="weui-cell_ft js_counter">0/3</div>
					</div>
					<div class="weui-uploader__bd">
						<ul class="weui-uploader__files">
							<!-- 预览图插入到这 -->
						</ul>
						<div class="weui-uploader__input-box">
							<input id="js_file" class="weui-uploader__input js_file"
								type="file" accept="image/jpg,image/jpeg,image/png,image/gif"
								multiple="">
						</div>
					</div>
				</div>
				<div class="bd">
					<div class="weui-msg__desc">温馨提示：建议在wifi环境下上传图片，或者适当控制图片大小。部分安卓系统暂时不支持图片上传。</div>
				</div>
			</div>
			</div>
		</div>
		<a class="weui-btn weui-btn_primary" onclick="return takeSubmit();">
			提交 </a>
</div>
</form>
<div id="loadingToast" style="opacity: 0; display: none;">
	<div class="weui-mask_transparent"></div>
	<div class="weui-toast">
		<i class="weui-loading weui-icon_toast"></i>
		<p class="weui-toast__content">数据加载中</p>
	</div>
</div>
<div id="weui-dialog_confirm" class="weui-dialog_confirm"
	style="display:none">
	<div class="weui-mask"></div>
	<div class="weui-dialog">
		<div class="weui-dialog__hd">
			<strong class="weui-dialog__title">确认</strong>
		</div>
		<div class="weui-dialog__bd">
			是否删除这张图片？<br>
		</div>
		<div class="weui-dialog__ft">
			<a id="btnCanel" href="javascript:;"
				class="weui-dialog__btn weui-dialog__btn_default">取消</a> <a
				id="btnOk" href="javascript:;"
				class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
		</div>
	</div>
</div>

<script type="text/javascript">
    document.title="事件申报|"+"${appUser.fullname}"+"${appUser.name}";
    var subing = false;
    var maxCount = 3;
    /* var myDate = new Date();
	$("#dateSelector").DateSelector({
			ctlYearId : 'idYear',
			ctlMonthId : 'idMonth',
			defYear : 2000,
			defMonth : 1,
			defDay : 1,
			ctlDayId : 'idDay',
			minYear : 2000,
			maxYear : 2100
	}); */
    function takeSubmit() {
	var validReult = true;
	var message = "";
	
	
	$("form .formRequired").each(
			function(index, item) {
			    var me = $(item);
			    var t = me.is("input:checkbox") || me.is("input:radio"), tValue = "";
			    if (t) {
				var tName = me.attr("name");
				tValue = me.find("input[name='" + tName + "']:checked").val();
			    } else {
				tValue = me.val();
			    }

			    if ((tValue == "" || tValue == undefined)) {

				message += me.data("valid") + "，\n\r";
				validReult = false;
			    }
			});
			message=message.substring(0,message.length-1);
			message="请填写：\n"+message;

	if (!validReult) {
	    $.weui.alert({
				text :message
			});
	    return false;
	}

	if (subing == false) {
	    $(this).hide();
	    var $loadingToast = $('#loadingToast');
	    if ($loadingToast.css('display') != 'none') return;
	    $loadingToast.fadeIn(100);
	    subing = true;
	    $("#formid").submit();
	    return true;
	}

    }
    function choserelateCiType(v) {
	if (v == 1) {
	    $("#cilist").attr("disabled", false);
	    $("#choseway2").hide();
	    $("[id^='choseway1']").show();

	} else {
	    $("#cilist").attr("disabled", "disabled");
	    $("[id^='choseway1']").hide();
	    $("#choseway2").show();
	}
    }
    
    function removeImg(num)
    {
        $("#image" + num).remove();
		var numt = $('.weui-uploader__file-content').length;
		$('.js_counter').text((numt) + '/' + maxCount);
	    $confirm.hide();
    }
    
    
    function removeImage(num) {
		var $confirm = $('#weui-dialog_confirm');
		$confirm.on('touchend click', '#btnCanel', function() {
		   $confirm.hide();
		});
		  $("#btnOk").bind("click",removeImg(num));
		  $confirm.show();
		
		/* $confirm.on('touchend click', '#btnOk', function() {
		     $("#image" + num).remove();
		     var numt = $('.weui-uploader__file-content').length;
		     $('.js_counter').text((numt) + '/' + maxCount);
			 $confirm.hide();
		}); */
		  
		 /*  var num = $('.weui-uploader__file-content').length;
		     alert(num);
		     $('.js_counter').text((num) + '/' + maxCount);  */
	}

	$(function() {
		// 允许上传的图片类型  
		var allowTypes = [ 'image/jpg', 'image/jpeg', 'image/png', 'image/gif' ];

		// 图片最大宽度  
		var maxWidth = 600;
		// 最大上传图片数量  
		

		$('#js_file').on('change', function(event) {
			var files = event.target.files;
			// 如果没有选中文件，直接返回  
			if (files.length === 0) {
				return;
			}

			for (var i = 0, len = files.length; i < len; i++) {
				var file = files[i];
				var reader = new FileReader();
				// 如果类型不在允许的类型范围内  
				

				if ($('.weui-uploader__file_status ').length >= maxCount) {
					$.weui.alert({
						text : '最多只能上传' + maxCount + '张图片'
					});
					return;
				}

				EXIF.getData(file, function() {
					// alert(EXIF.pretty(this));  
					EXIF.getAllTags(this);
					//alert(EXIF.getTag(this, 'Orientation'));   
					Orientation = EXIF.getTag(this, 'Orientation');
					//return;  
				});

				reader.onload = function(e) {
					var img = new Image();
					img.onload = function() {
						// 不要超出最大宽度  
						var w = img.width, h = img.height;
						// 高度按比例计算  

						/* if (img.width > maxWidth) {
							w = maxWidth;
							h = img.height * (w / img.width);
						} else {
							w = img.width;
							h = img.height;
						} */

						var canvas = document.createElement('canvas');
						var ctx = canvas.getContext('2d');
						// 设置 canvas 的宽度和高度  
						canvas.width = w;
						canvas.height = h;
						
						 if (allowTypes.indexOf(file.type) === -1) {
							$.weui.alert({
								text : '您上传的文件格式为：'+file.type
							});
						} 
						ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, w, h);

						var base64 = null;
						//修复ios  
						if (navigator.userAgent.match(/iphone/i)) {
							console.log('iphone');
							//alert(expectWidth + ',' + expectHeight);  
							//如果方向角不为1，都需要进行旋转 added by lzk  
							if (Orientation != "" && Orientation != 1) {

								switch (Orientation) {
								case 6://需要顺时针（向左）90度旋转   
									rotateImg(this, 'left', canvas);
									break;
								case 8://需要逆时针（向右）90度旋转  
									rotateImg(this, 'right', canvas);
									break;
								case 3://需要180度旋转  

									rotateImg(this, 'right', canvas);//转两次  
									rotateImg(this, 'right', canvas);
									break;
								}
							}

						    //base64 = canvas.toDataURL("image/jpeg", 0.8);
							base64 = canvas.toDataURL("image/jpeg", 1);
						} else if (navigator.userAgent.match(/Android/i)) {// 修复android  

						} else {
							//alert(Orientation);  
							if (Orientation != "" && Orientation != 1) {
								//alert('旋转处理');  
								switch (Orientation) {
								case 6://需要顺时针（向左）90度旋转  

									rotateImg(this, 'left', canvas);
									break;
								case 8://需要逆时针（向右）90度旋转  

									rotateImg(this, 'right', canvas);
									break;
								case 3://需要180度旋转  

									rotateImg(this, 'right', canvas);//转两次  
									rotateImg(this, 'right', canvas);
									break;
								}
							}

						}
						base64 = canvas.toDataURL("image/jpeg", 600 * 1024 / file.size);
						//base64 = canvas.toDataURL("image/jpeg", 1);
						var num = $('.weui-uploader__file_status ').length + 1;
						// 插入到预览区  
						//var $preview = $('<li onclick="removeImage(' + num + ')" id="image' + num + '" class="weui-uploader__file weui-uploader__file_status" style="background-image:url(' + base64 + ')"><div class="weui-uploader__file-content">等待提交</div><input name="image'+num+'" type="hidden" value="'+base64+'"></li>');
						var $preview = $('<li onclick="removeImage(' + num + ')" id="image' + num + '" class="weui-uploader__file weui-uploader__file_status" style="background-image:url(' + base64 + ')"><div class="weui-uploader__file-content">等待提交</div></li>');
						$('.weui-uploader__files').append($preview);

						$('.js_counter').text((num) + '/' + maxCount);

						// 然后上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传  
						 var id=$("#id").val();
						 var fileName=file.name;
						 var openId=$("#openid").val();
						 var fileSize=file.size;
	
						  $.post('<%=basePath%>api/wechat/incident/uploadFile',
														{
															imgCode : base64,
															sourceId : id,
															fileName : fileName,
															openId : openId,
															size : fileSize
														}, function(result) {

														});

									};

									img.src = e.target.result;
								};
								reader.readAsDataURL(file);
							}
						});
	});
	//对图片旋转处理 added by lzk  
	function rotateImg(img, direction, canvas) {
		//alert(img);  
		//最小与最大旋转方向，图片旋转4次后回到原方向    
		var min_step = 0;
		var max_step = 3;
		//var img = document.getElementById(pid);    
		if (img == null)
			return;
		//img的高度和宽度不能在img元素隐藏后获取，否则会出错    
		var height = img.height;
		var width = img.width;
		//var step = img.getAttribute('step');    
		var step = 2;
		if (step == null) {
			step = min_step;
		}
		if (direction == 'right') {
			step++;
			//旋转到原位置，即超过最大值    
			step > max_step && (step = min_step);
		} else {
			step--;
			step < min_step && (step = max_step);
		}
		//img.setAttribute('step', step);    
		/*var canvas = document.getElementById('pic_' + pid);   
		if (canvas == null) {   
		    img.style.display = 'none';   
		    canvas = document.createElement('canvas');   
		    canvas.setAttribute('id', 'pic_' + pid);   
		    img.parentNode.appendChild(canvas);   
		}  */
		//旋转角度以弧度值为参数    
		var degree = step * 90 * Math.PI / 180;
		var ctx = canvas.getContext('2d');
		switch (step) {
		case 0:
			canvas.width = width;
			canvas.height = height;
			ctx.drawImage(img, 0, 0);
			break;
		case 1:
			canvas.width = height;
			canvas.height = width;
			ctx.rotate(degree);
			ctx.drawImage(img, 0, -height);
			break;
		case 2:
			canvas.width = width;
			canvas.height = height;
			ctx.rotate(degree);
			ctx.drawImage(img, -width, -height);
			break;
		case 3:
			canvas.width = height;
			canvas.height = width;
			ctx.rotate(degree);
			ctx.drawImage(img, -width, 0);
			break;
		}
	}
</script>
</div>